<template>
  <div class="social_securitys-container">
    <div class="app-container">
      <el-card>
        <!-- 具体页面结构 -->
        社保
        <el-divider />

        <Son :id="id" ref="son" />
        <el-button @click="changeId">点我改 ID</el-button>
      </el-card>
    </div>
  </div>
</template>

<script>
import Son from './Son.vue'
export default {
  components: {
    Son
  },
  data() {
    return {
      id: '999'
    }
  },
  methods: {
    changeId() {
      // 在这里修改, 子组件不会立即收到更新
      // 因为 props 的数据更新是异步的
      this.id = '110'
      // console.log(this.$refs.son.id) // 999
      // 如果想拿最新的 id 怎么办?
      this.$nextTick(() => {
        console.log(this.$refs.son.id) // 110
      })
    }
  }
}
</script>
